<#include "/common/layout.html">
<@body>
<body class="gray-bg">
	<div class="wrapper">
		<section class="content">
			<div class="box">
				<div class="form-inline">
					<div class="box-header">
						<div class="input-group input-group-sm">
							<input type="text" name="search_value" id="search_value" class="form-control" placeholder="角色名称">
							<div class="input-group-btn">
								<a href="javascript:;" id="search_data" class="btn btn-default" ><i class="fa fa-search"></i> 搜索</a>
								<a href="javascript:;" id="search_refresh" class="btn btn-default"><i class="fa fa-refresh"></i> 重置</a>
							</div>
						</div>
					</div>
				</div>
				<div class="box-body">
					<input type="hidden" id="roleId" value="${roleId}" >
					<table id="roleUsers_initTable" class="table table-bordered table-hover"></table>
				</div>
			</div>
		</section>
	</div>
</body>
</@body>
<script>
	$(function(){
		initTable();
	}); 
	var query_data = {
		roleId: $("#roleId").val(),
		search: ''
	}
	//搜索
	$("#search_data").off().on("click", function() {
		query_data.search = $("#search_value").val();
		reloadTable();
	});
	//重置
	$("#search_refresh").off().on("click", function() {
		query_data.search = "";
		$("#search_value").val("");
		reloadTable();
	});
	//重新加载表格
	function reloadTable() {
		var oSetting = data_oTable.settings()[0];
		oSetting.ajax.data = query_data;
		data_oTable.draw();
	}
	//渲染表格
	function initTable() {
		var options = {
			id: 'roleUsers_initTable',
			ajax: {
				url: "${request.contextPath}/system/role/getUsers/listPage",
				type: "POST",
				data: query_data,
			},
			headerCallback: function(e, a, t, n, s) {
				e.getElementsByTagName("th")[0].innerHTML = '<label class="m-checkbox"><input type="checkbox" class="minimal m-group-checkable" value="root"></label>';
				$(e.getElementsByTagName("th")).parent().css("background-color", "#f7f7fa");
			},
			columnDefs: [{
				targets: 0,
				width: "30px",
				orderable: !1,
				render: function(e, a, t, n) {
					return '<label class="m-checkbox"><input type ="checkbox" class="minimal m-checkable" value="' + t.userId + '"></label>';
				}
			},{
				targets: 1,
				title: "用户名",
				orderable: !1,
				render: function(e, a, t, n) {
					if (t.userName != null) {
						return t.userName;
					} else {
						return "";
					}
				}
			},{
				targets: 2,
				title: "描述",
				orderable: !1,
				render: function(e, a, t, n) {
					if (t.userDesc != null) {
						return t.userDesc;
					} else {
						return "";
					}
				}
			},{
				targets: 3,
				title: "创建时间",
				orderable: !1,
				render: function(e, a, t, n) {
					if (t.createTime != null) {
						return t.createTime;
					} else {
						return "";
					}
				}
			},{
				targets: 4,
				title: "状态",
				orderable: !1,
				render: function(e, a, t, n) {
					if (t.userState == 1) {
						return '<font color="green">启用</font>';
					} else {
						return '<font color="red">禁用</font>';
					}
				}
			}]
		};
		//渲染表格
		data_oTable = $.table.init(options);
	}
	
	function submitHandler() {
		var ids = [];
		$.each($("input:checked"), function(n, i) {
			if ($(this).val() != 'root') {
				ids.push($(this).val());
			}
		});
		if (ids.length == 0) {
			$.modal.msgWarning("请至少选择一条记录!");
		} else {
			var index = layer.load(3); // 换了种风格
			$.ajax({
				url : '${request.contextPath}/system/role/addAssignUser',
				type : 'POST',
				dataType : "json",
				data : {userIds : ids.join(), roleId : $("#roleId").val()},
				beforeSend : function() {
					$.modal.loading("正在处理中，请稍后...");
					$.modal.disable();
				},
				success : function(data) {
					layer.close(index);
					if (data.code == 200) {
						if (data.msg) {
							parent.layer.msg(data.msg, {
								icon : 1
							});
						} else {
							parent.layer.msg('提交成功', {
								icon : 1
							});
						}
						parent.layer.closeAll('iframe'); // 关闭当前frame
						window.parent.data_oTable.draw(false);
					} else {
						layer.msg(data.msg, {
							icon : 2
						});
						$.modal.closeLoading();
						$.modal.enable();
					}
				}
			});
		}
	}
</script>

